<template>
  <div class="app-space">
    <div class="action">
      <el-button :type="isShow ? 'danger' : 'success'" @click="handleToggle">
        {{ isShow ? '关闭' : '启动' }}
      </el-button>
      <el-button type="warning" @click="handleFullscreen">点击全屏</el-button>
      <el-button color="#626aef" @click="open">打开网页</el-button>
      <el-button type="primary">下载当前模型</el-button>
      <el-button @click="isShow = !isShow">手动切换（不请求）</el-button>
    </div>

    <template v-if="isShow">
      <iframe
        ref="frameRef"
        id="inlineFrame"
        title="Inline Frame Example"
        allow="payment"
        frameborder="0"
        :src="openSrc"
      >
      </iframe>
    </template>
    <template v-else>
      <div
        class="inlineFrame-box"
        :class="{ 'inlineFrame-box-dark': isShowLoading }"
        @click="isShow = true"
      >
        演示窗口🙅🏻‍♀️
      </div>
      <loading class="loading" ref="loadingRef" />
    </template>
  </div>
</template>

<script lang="ts" setup>
import Loading from '@/components/loading/Loading.vue'
import { ref } from 'vue'
import { executeCommandApi, stopCommandApi, exeLineApi } from '@/service/api'
import { nextTick } from 'vue'
import { ElMessage } from 'element-plus'

const loadingRef = ref<any>(null)
const frameRef = ref<any>(null)
const isShow = ref(false)
const isShowLoading = ref(false)
const flag = ref(false) // 节流
const openSrc = ref('http://192.168.60.95:7860/')
const timer = ref<any>(null)
const endFlagNum = ref(30)

const handleToggle = async () => {
  // 节流：防止重复点击
  if (flag.value) return
  flag.value = true

  if (!isShow.value) {
    // - 启动服务
    executeCommandApi() // 启动服务接口

    // - 开启loading
    nextTick(() => {
      loadingRef.value?.showLoading()
      isShowLoading.value = true
    })

    // - 开始一秒钟检测一次服务是否加载成功，最多30秒超时
    timer.value = setInterval(() => {
      endFlagNum.value--

      exeLineApi().then((res: any) => {
        if (res.result == '1') {
          // - 检测到服务已经启动
          start()
        } else if (endFlagNum.value <= 0) {
          // - 超时结束服务
          ElMessage.error('服务已超时')
          stop()
        }
      })
    }, 1000)
  } else {
    // - 结束服务
    stopCommandApi() // 关闭服务接口
    stop() // 恢复初始化
  }
}
const handleFullscreen = () => {
  frameRef.value?.requestFullscreen()
}
const open = () => {
  window.open(`${openSrc.value}`, '_blank')
}

// ====== tool
function start() {
  // 清除定时器并重置超时计数
  if (timer.value) {
    clearInterval(timer.value)
    timer.value = null
    endFlagNum.value = 30
  }
  // 开启iframe
  isShow.value = true
  // 关闭loading
  loadingRef.value?.hiddenLoading()
  isShowLoading.value = false
  // 关闭节流
  flag.value = false
}
function stop() {
  // 清除定时器并重置超时计数
  if (timer.value) {
    clearInterval(timer.value)
    timer.value = null
    endFlagNum.value = 30
  }
  // 关闭iframe
  isShow.value = false
  // 关闭loading
  loadingRef.value?.hiddenLoading()
  isShowLoading.value = false
  // 关闭节流
  flag.value = false
}
</script>

<style lang="less" scoped>
.app-space {
  display: flex;
  flex-direction: column;
  align-items: center;

  .action {
    display: flex;
    align-items: center;
    height: 100px;
  }
  #inlineFrame {
    width: 1000px;
    min-height: 700px;
  }
  .inlineFrame-box {
    position: relative;
    width: 1000px;
    min-height: 700px;
    background-color: cornflowerblue;
    color: white;
    font-size: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .inlineFrame-box-dark {
    background-color: rgba(100, 148, 237, 0.386);
  }
  .loading {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%);
    z-index: 99;
  }
}
</style>
